<template>
  <view class="consume-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-search-bar
          placeholder="搜索会员姓名或手机号"
          :clearButton="true"
          :cancelButton="true"
          v-model="searchKeyword"
          @confirm="handleSearch"
          @input="handleInput"
          @cancel="handleCancel"
      />
    </view>

    <!-- 消费记录列表 -->
    <view class="consume-list">
      <uni-list>
        <uni-list-item
            v-for="record in filteredRecords"
            :key="record.id"
            :title="record.memberName"
            :note="record.memberPhone"
            :thumb="record.memberAvatar || '/static/logo.png'"
            thumbSize="lg"
            :showArrow="true"
            :clickable="true"
        >
          <template v-slot:footer>
            <view class="record-info">
              <text class="item">项目: {{record.itemName}}</text>
              <text class="amount">金额: ¥{{record.amount}}</text>
              <text class="times">次数: {{record.times}}</text>
              <text class="time">时间: {{record.consumeTime}}</text>
            </view>
          </template>
        </uni-list-item>
      </uni-list>

      <!-- 空状态 -->
      <view v-if="filteredRecords.length === 0" class="empty-state">
        <uni-icons type="wallet" size="60" color="#ccc" />
        <text class="empty-text">暂无消费记录</text>
        <text class="empty-subtext">点击下方按钮添加消费记录</text>
      </view>
    </view>

    <!-- 新增消费记录弹窗 -->
    <uni-popup ref="addPopup" type="center">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">新增消费记录</text>
          <uni-icons type="close" size="24" @click="closeAddPopup" />
        </view>

        <view class="form-container">
          <!-- 会员选择 -->
          <view class="form-item">
            <text class="label">选择会员</text>
            <picker class="picker" :range="members" range-key="name" @change="onMemberChange">
              <view class="picker-value">
                {{ newRecord.memberName || '请选择会员' }}
              </view>
            </picker>
          </view>

          <!-- 消费项目 -->
          <view class="form-item">
            <text class="label">消费项目</text>
            <picker class="picker" :range="itemOptions" @change="onItemChange">
              <view class="picker-value">
                {{ newRecord.itemName || '请选择消费项目' }}
              </view>
            </picker>
          </view>

          <!-- 消费金额 -->
          <view class="form-item">
            <text class="label">消费金额</text>
            <input class="input" v-model="newRecord.amount" type="number" placeholder="请输入消费金额" />
          </view>

          <!-- 消费次数 -->
          <view class="form-item">
            <text class="label">消费次数</text>
            <input class="input" v-model="newRecord.times" type="number" placeholder="请输入消费次数" />
          </view>

          <!-- 消费时间 -->
          <view class="form-item">
            <text class="label">消费时间</text>
            <picker mode="date" :value="newRecord.consumeTime" @change="onDateChange">
              <view class="picker-value">
                {{ newRecord.consumeTime || '请选择消费时间' }}
              </view>
            </picker>
          </view>
        </view>

        <view class="popup-actions">
          <button class="btn-cancel" @click="closeAddPopup">取消</button>
          <button class="btn-confirm" @click="saveRecord">保存</button>
        </view>
      </view>
    </uni-popup>

    <!-- 悬浮新增按钮 -->
    <uni-fab
        :pattern="fabPattern"
        horizontal="right"
        vertical="bottom"
        :content="fabContent"
        @trigger="onFabTrigger"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      newRecord: {
        memberId: null,
        memberName: '',
        memberPhone: '',
        memberAvatar: '',
        itemName: '',
        amount: '',
        times: 1,
        consumeTime: ''
      },
      itemOptions: ['洗车服务', '美容服务', '保养服务', '维修服务', '其他服务'],
      fabPattern: {
        color: '#fff',
        backgroundColor: '#007AFF',
        selectedColor: '#007AFF',
        buttonColor: '#007AFF'
      },
      fabContent: [
        {
          text: '新增记录',
          iconPath: '/static/icons/add.png',
          selectedIconPath: '/static/icons/add-active.png'
        }
      ],
      // 模拟会员数据
      members: [
        {
          id: 1,
          name: '张三',
          phone: '13800138000',
          avatar: '/static/c1.png'
        },
        {
          id: 2,
          name: '李四',
          phone: '13900139000',
          avatar: '/static/c2.png'
        },
        {
          id: 3,
          name: '王五',
          phone: '13700137000',
          avatar: '/static/c3.png'
        }
      ],
      // 模拟消费记录数据
      consumeRecords: [
        {
          id: 1,
          memberId: 1,
          memberName: '张三',
          memberPhone: '13800138000',
          memberAvatar: '/static/c1.png',
          itemName: '洗车服务',
          amount: 50.00,
          times: 1,
          consumeTime: '2024-01-15'
        },
        {
          id: 2,
          memberId: 2,
          memberName: '李四',
          memberPhone: '13900139000',
          memberAvatar: '/static/c2.png',
          itemName: '美容服务',
          amount: 200.00,
          times: 1,
          consumeTime: '2024-01-14'
        },
        {
          id: 3,
          memberId: 3,
          memberName: '王五',
          memberPhone: '13700137000',
          memberAvatar: '/static/c3.png',
          itemName: '保养服务',
          amount: 300.00,
          times: 1,
          consumeTime: '2024-01-13'
        }
      ]
    }
  },
  computed: {
    filteredRecords() {
      if (!this.searchKeyword) {
        return this.consumeRecords
      }
      const keyword = this.searchKeyword.toLowerCase()
      return this.consumeRecords.filter(record =>
          record.memberName.toLowerCase().includes(keyword) ||
          record.memberPhone.includes(keyword) ||
          record.itemName.toLowerCase().includes(keyword)
      )
    }
  },
  methods: {
    handleSearch(e) {
      console.log('搜索确认:', e.value)
    },
    handleInput(e) {
      console.log('输入内容:', e)
    },
    handleCancel(e) {
      console.log('取消搜索:', e.value)
      this.searchKeyword = ''
    },
    onFabTrigger(e) {
      const { index, item } = e
      if (index === 0) { // 新增消费记录
        this.showAddPopup()
      }
    },
    showAddPopup() {
      this.resetNewRecord()
      this.$refs.addPopup.open()
    },
    closeAddPopup() {
      this.$refs.addPopup.close()
    },
    onMemberChange(e) {
      const index = e.detail.value
      const member = this.members[index]
      this.newRecord.memberId = member.id
      this.newRecord.memberName = member.name
      this.newRecord.memberPhone = member.phone
      this.newRecord.memberAvatar = member.avatar
    },
    onItemChange(e) {
      const index = e.detail.value
      this.newRecord.itemName = this.itemOptions[index]
    },
    onDateChange(e) {
      this.newRecord.consumeTime = e.detail.value
    },
    saveRecord() {
      if (!this.newRecord.memberId || !this.newRecord.itemName || !this.newRecord.amount) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }

      const newRecord = {
        id: Date.now(),
        memberId: this.newRecord.memberId,
        memberName: this.newRecord.memberName,
        memberPhone: this.newRecord.memberPhone,
        memberAvatar: this.newRecord.memberAvatar,
        itemName: this.newRecord.itemName,
        amount: Number(this.newRecord.amount),
        times: Number(this.newRecord.times) || 1,
        consumeTime: this.newRecord.consumeTime || new Date().toLocaleDateString()
      }

      this.consumeRecords.unshift(newRecord)
      uni.showToast({
        title: '添加成功',
        icon: 'success'
      })

      this.closeAddPopup()
    },
    resetNewRecord() {
      this.newRecord = {
        memberId: null,
        memberName: '',
        memberPhone: '',
        memberAvatar: '',
        itemName: '',
        amount: '',
        times: 1,
        consumeTime: ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
.consume-container {
  padding: 0;
  background-color: #f8f8f8;
  padding-bottom: 100px;
}

.search-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
  padding: 10rpx 0;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.consume-list {
  padding: 20rpx;
}

.record-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .item, .amount, .times, .time {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
  }

  .amount {
    color: #e64340;
    font-weight: bold;
  }

  .time {
    color: #999;
    font-size: 22rpx;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  .empty-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }

  .empty-subtext {
    font-size: 24rpx;
    color: #ccc;
    margin-top: 10rpx;
  }
}

.popup-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 600rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.form-container {
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.input, .picker-value {
  width: 95%;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  background: #fff;
}

.picker-value {
  color: #333;
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}

.btn-cancel, .btn-confirm {
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  border: none;
}

.btn-cancel {
  background: #f0f0f0;
  color: #666;
}

.btn-confirm {
  background: #007aff;
  color: #fff;
}
</style>